<template>
  <div>
    <div class="reagentBox">
      <div class="leftContent">
        <div class="leftContentTop">
          <div class="topConsume">
            <light-box>
              <span
                slot="light"
                class="leftLight aqua"
              ></span>
              <span slot="title">今日试剂消耗量</span>
              <span slot="value">{{todayConsume}}</span>
            </light-box>
            <light-box>
              <span
                slot="light"
                class="leftLight orange"
              ></span>
              <span slot="title">F3999试剂消耗量</span>
              <span slot="value">{{F3999Consume}}</span>
            </light-box>
            <light-box>
              <span
                slot="light"
                class="leftLight yellow"
              ></span>
              <span slot="title">F4000试剂消耗量</span>
              <span slot="value">{{F4000Consume}}</span>
            </light-box>
            <light-box>
              <span
                slot="light"
                class="leftLight skyblue"
              ></span>
              <span slot="title">I100试剂消耗量</span>
              <span slot="value">{{I100Consume}}</span>
            </light-box>
            <light-box>
              <span
                slot="light"
                class="leftLight pink"
              ></span>
              <span slot="title">S6500试剂消耗量</span>
              <span slot="value">{{S6500Consume}}</span>
            </light-box>
          </div>
          <title-text><span slot="title">1-12月试剂消耗量</span></title-text>
          <div class="tableBox">
            <el-table
              :row-style="rowStyle"
              :header-cell-style="headStyle"
              :cell-style="cellStyle"
              :data="tableData"
              :size="small"
              :fit="fit"
              :highlight-current-row=true
            >
              <el-table-column
                prop="rName"
                label="试剂名称"
                min-width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="rMonth"
                label="月份"
                min-width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="total"
                label="试剂消耗量"
                min-width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="type"
                label="仪器类型"
                min-width="80"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
          <!-- 1-12月试剂消耗量分页器 -->
          <div class="monthPageBox">
            <el-pagination
              @current-change="yearReagentConsume"
              background
              layout="prev, pager, next"
              :total="reagentPagesTotal"
              :page-size='reagentPagesSize'
            >
            </el-pagination>
          </div>
        </div>
        <div class="leftContentBottom">
          <title-text>
            <span slot="title">1-12月试剂消耗量折线图</span>
          </title-text>
          <div
            id="lineBox"
            class="lineBox"
          ></div>
        </div>
      </div>

      <div class="rightContent">
        <div class="rightContentTop">
          <title-text><span slot="title">本月前十试剂消耗排行</span></title-text>
          <div class="selectBox">
            <div
              class="radioBox"
              v-for="(item, index) in radioText"
              :key="index"
            >
              <input
                @click="selectedRadio(index)"
                class="radioStyle"
                type="radio"
                name="reagent"
                value="area"
                :checked="item.defullt"
              />
              <span>{{item.type}}</span>
            </div>
          </div>
          <div
            id="barBox"
            class="barBox"
          ></div>
        </div>
        <div class="rightContentBottom">
          <title-text><span slot="title">本月各城市试剂消耗排行</span></title-text>
          <div class="cityTableBox">
            <el-table
              :row-style="rowStyle"
              :header-cell-style="headStyle"
              :cell-style="cellStyle"
              :data="cityTableData"
              :size="small"
              :fit="fit"
              :highlight-current-row=true
            >
              <el-table-column
                prop="aName"
                label="大区名称"
                min-width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="cName"
                label="城市名称"
                min-width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="type"
                label="仪器类型"
                min-width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="rName"
                label="试剂名称"
                min-width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="sValue"
                label="本月用量"
                min-width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="tb"
                label="同比"
                min-width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="hb"
                label="环比"
                min-width="80"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
          <div class="citypageBox">
            <!-- 各城市试剂消耗排行分页器 -->
            <el-pagination
              background
              @current-change="cityReagentConsume"
              layout="prev, pager, next"
              :total="cityPagerTotal"
              :page-size="cityPagerSize"
            >
            </el-pagination>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { todeyInsTypeConsume } from "@/request/api.js";
import { yearReagentConsume } from "@/request/api.js";
import { cityReagentConsume } from "@/request/api.js";
import { MonthTop10Consume } from "@/request/api.js";
import { yearReagentConsumeLine } from "@/request/api.js";

import lightBox from "@/components/ReagentChart/lightBox";
import titleText from "@/components/title.vue";
import * as echarts from "echarts";
import tellgenChart from "@/assets/tellgenChart.js";
import "@/assets/base/echartsBaseStyle.css";
export default {
  data() {
    return {
      reagentPagesTotal: null,
      reagentPagesSize: 6,
      cityPagerTotal: null,
      cityPagerSize: 6,
      small: "small",
      fit: true,
      headStyle: {
        height: "5rem",
        backgroundColor: "#131428",
        color: "#FFFFFF",
        fontSize: "1.4rem",
      },
      cellStyle: {
        height: "5rem",
        fontSize: "1.4rem",
      },
      radioText: [
        { type: "大区", defullt: "checked" },
        { type: "城市" },
        { type: "仪器类型" },
        { type: "医院名称" },
        { type: "试剂名称" },
      ],
      // : ["大区", "城市", "仪器类型", "医院名称", "试剂名称"],
      cityTableData: [],
      tableData: [],
      todayConsume: null,
      F3999Consume: null,
      F4000Consume: null,
      I100Consume: null,
      S6500Consume: null,
      top10Data: [],

      fullData: [],
      typesData: [],
      datesData: [],

      // S6500: [],
      // I100: [],
      // F3999: [],
      // F4000: [],
      monthData: [],
      typeData: [],
      totalData: [],
    };
  },
  created() {
    this.todeyInsTypeConsume();
    this.yearReagentConsume(1);
    this.cityReagentConsume(1);
    this.MonthTop10Consume("area");
    this.yearReagentConsumeLine();
  },
  mounted() {
    // this.showLineChart();
    // this.showBarChart();
  },
  components: {
    titleText,
    lightBox,
  },
  methods: {
    //本月前十试剂消耗排行模块的单选框
    selectedRadio(e) {
      console.log("选中了", e);
      switch (e) {
        case 0:
          this.MonthTop10Consume("area");
          break;
        case 1:
          this.MonthTop10Consume("city");
          break;
        case 2:
          this.MonthTop10Consume("eType");
          break;
        case 3:
          this.MonthTop10Consume("dName");
          break;
        case 4:
          this.MonthTop10Consume("rName");
          break;
      }
    },
    //今日试剂消耗量、仪器试剂消耗量接口
    todeyInsTypeConsume() {
      todeyInsTypeConsume()
        .then((res) => {
          console.log("请求试剂消耗量成功", res);
          if (res.data.success) {
            this.F3999Consume = res.data.rows[0].total;
            this.F4000Consume = res.data.rows[1].total;
            this.I100Consume = res.data.rows[2].total;
            this.S6500Consume = res.data.rows[3].total;
            this.todayConsume = res.data.rows[4].total;
          }
        })
        .catch((err) => {
          console.log("请求试剂消耗量失败", err);
        });
    },
    //1-12月试剂消耗量接口
    yearReagentConsume(pages) {
      console.log("pages是", pages);
      yearReagentConsume({
        page: pages,
        pageSize: "6",
      })
        .then((res) => {
          console.log("1-12月试剂消耗量接口成功", res);
          if (res.data.success) {
            this.tableData = res.data.rows;
            this.reagentPagesTotal = res.data.total;
          }
        })
        .catch((err) => {
          console.log("1-12月试剂消耗量接口失败", err);
        });
    },
    //本月各城市试剂消耗排行
    cityReagentConsume(pages) {
      cityReagentConsume({
        page: pages,
        pageSize: "6",
      })
        .then((res) => {
          console.log("各城市试剂消耗排行接口成功", res);
          if (res.data.success) {
            this.cityTableData = res.data.rows;
            this.cityPagerTotal = res.data.total;
          }
        })
        .catch((err) => {
          console.log("各城市试剂消耗排行接口失败", err);
        });
    },
    //本月前十试剂消耗排行
    MonthTop10Consume(types) {
      MonthTop10Consume({
        type: types,
      })
        .then((res) => {
          console.log("本月前十试剂消耗接口成功", res);
          if (res.data.success) {
            this.top10Data = res.data.rows;
          }
          this.showBarChart();
        })
        .catch((err) => {
          console.log("本月前十试剂消耗接口失败", err);
        });
    },
    //1-12月试剂消耗量折线图接口
    yearReagentConsumeLine() {
      yearReagentConsumeLine()
        .then((res) => {
          console.log("试剂消耗量折线图接口成功", res);

          var S6500 = [];
          var i100 = [];
          var F3999 = [];
          var F4000 = [];
          var totalData = res.data.rows;
          for (var i = 0; i < totalData.length; i++) {
            var monthIndex = this.monthData.indexOf(totalData[i].month);
            var typeIndex = this.typeData.indexOf(totalData[i].type);
            if (monthIndex == -1) {
              //==-1,在数组中没有查询到索引，数组中没有当前元素
              this.monthData.push(totalData[i].month);
            }
            if (typeIndex == -1) {
              //数组中没有当前字符串
              var dataObject = {};
              this.typeData.push(totalData[i].type);
              dataObject.types = totalData[i].type; //{types:"S6500"}
              this.totalData.push(dataObject);
            }
            switch (totalData[i].type) {
              case "S6500":
                S6500.push(totalData[i].total);
                break;
              case "i100":
                i100.push(totalData[i].total);
                break;
              case "F3999":
                F3999.push(totalData[i].total);
                break;
              case "F4000":
                F4000.push(totalData[i].total);
                break;
            }
          }
          this.totalData[0].datas = S6500;
          this.totalData[1].datas = i100;
          this.totalData[2].datas = F3999;
          this.totalData[3].datas = F4000;

          console.log("滴滴", this.totalData);
          console.log(this.monthData);
          console.log(this.typeData);

          this.showLineChart();
        })
        .catch((err) => {
          console.log("试剂消耗量折线图接口失败", err);
        });
    },

    rowStyle(row) {
      if (row.rowIndex % 2 === 0) {
        return { backgroundColor: "#222644" };
      } else if (row.rowindex % 2 === 1) {
        return { backgroundColor: "#262b4b" };
      }
    },
    showLineChart() {
      var lineBox = document.getElementById("lineBox");
      var myLineChart = this.$echarts.init(lineBox, "tellgenChart");
      var tempData = [];

      for (var i = 0; i < this.totalData.length; i++) {
        tempData.push({
          name: this.totalData[i].types, //2 类型
          type: "line",
          stack: "总量",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: this.totalData[i].datas, //3 值
          label: {
            show: true,
            fontSize: "1.2rem",
            position: "right",
          },
        });
      }
      console.log("好好好", tempData);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: "1rem",
          },
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: this.typeData, //1类型typesData
          textStyle: {
            color: "#EEEEEE",
            fontSize: ".9rem",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.monthData, //2
            axisLabel: {
              color: "#eeeeee",
              fontSize: "1.2rem",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "#eeeeee",
              fontSize: "1.2rem",
            },
          },
        ],
        series: tempData,
      };
      option && myLineChart.setOption(option);
    },
    showBarChart() {
      var chartDom = document.getElementById("barBox");
      var myChart = echarts.init(chartDom, "tellgenChart");
      var tempData = [["amount", "product"]];
      for (var i = 0; i < this.top10Data.length; i++) {
        tempData.push([this.top10Data[i].value, this.top10Data[i].key]);
      }
      console.log(tempData);
      var option;
      option = {
        tooltip: {
          show: true,
          textStyle: {
            fontSize: "1.8rem",
          },
        },
        dataset: {
          source: tempData,
        },
        grid: {
          containLabel: true,
          left: "4%",
          right: "7%",
          bottom: "4%",
          top: "6%",
        },
        xAxis: {
          name: "amount",
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        yAxis: {
          type: "category",
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        // visualMap: {
        //   orient: "horizontal",
        //   left: "center",
        //   min: 10,
        //   max: 100,
        //   text: ["High Score", "Low Score"],
        //   // Map the score column to color
        //   dimension: 0,
        //   inRange: {
        //     color: ["#3db1ff"]
        //   }
        // },
        series: [
          {
            type: "bar",
            encode: {
              // Map the "amount" column to X axis.
              // x: "amount",
              // Map the "product" column to Y axis
              y: "product",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.reagentBox {
  width: 100%;
  height: 101.5rem; //改代码需要自适应
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-direction: row;
  .leftContent {
    flex: 1;
    margin: 0 2rem;
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-direction: column;
    .leftContentTop {
      flex: 1.35;
      background-color: #191931;
      margin-bottom: 1.4rem;
      border-radius: 1.4rem;
      border: 0.1rem solid #232341;
      padding: 0 2rem 2rem 2rem;

      .topConsume {
        width: 100%;
        height: 8rem;
        border-bottom: 0.3rem solid #100f1f;
        display: flex;
      }
      .tableBox {
        width: 100%;
        height: 38rem;
        overflow: hidden;
      }
      .monthPageBox {
        width: 100%;
        height: 4.8rem;
        // background-color: rgb(66, 63, 18);
        margin-top: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-pagination.is-background {
          width: 96%;
          height: 3.4rem;
          text-align: center;
        }
      }
    }
    .leftContentBottom {
      flex: 1;
      background-color: #191931;
      border-radius: 1.4rem;
      border: 0.1rem solid #232341;
      .lineBox {
        width: 100%;
        height: 36rem;
        background-color: rgb(70, 50, 25);
      }
    }
  }
  .rightContent {
    flex: 1;
    margin-right: 2rem;
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-direction: column;
    .rightContentTop {
      flex: 1;
      background-color: #191931;
      margin-bottom: 1.4rem;
      border-radius: 1.4rem;
      border: 0.1rem solid #232341;
      .selectBox {
        width: 80%;
        height: 4rem;
        margin: 0 auto;
        // background-color: rgb(68, 22, 64);
        display: flex;
        align-items: center;
        .radioBox {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          .radioStyle {
            width: 2rem;
            height: 2rem;
            margin: 0 1rem;
          }
        }
      }
      .barBox {
        width: 100%;
        height: 39.5rem;
      }
    }
    .rightContentBottom {
      flex: 1;
      background-color: #191931;
      border-radius: 1.4rem;
      border: 0.1rem solid #232341;
      padding: 0 2rem 2rem 2rem;
      .cityTableBox {
        width: 100%;
        height: 38rem;
        overflow: hidden;
      }
      .citypageBox {
        width: 100%;
        height: 4.8rem;
        // background-color: rgb(36, 71, 71);
        margin-top: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-pagination.is-background {
          width: 96%;
          height: 3.4rem;
          text-align: center;
        }
      }
    }
  }
}
</style>
